﻿<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta property="qc:admins" content="77103107776553571676375" />
<meta property="wb:webmaster" content="c4f857219bfae3cb" />
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<meta name="Keywords" content="" />
<meta name="Description" content="超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！" />

<title>代码初体验，制作我的第一个网页-慕课网 </title>



<link rel="stylesheet" href="css/layer.css"/>

<link rel="stylesheet" href="css/moco.min_2.css" type="text/css" />
<script type="text/javascript">
  var OP_CONFIG={"module":"course","page":"code","userout":0};
  var _msg_unread = 0; 
  var _not_unread = 0; 
  var _cart_num = 0;
  var tplDef={
	"url_space_u":"/space/u",
	"url_space_index":"/space/index",
    "url_space_course":"/space/course",
    "myclub_rule":"/about/faq?t=3",
    "url_course_qadetail":"/qadetail",
    "media_id":"49"
  }
  var seajsTimestamp="v=201705081743";
  var courseName="HTML+CSS基础课程";
    var isLogin = 0;
  </script>



<script type="text/javascript">
var pageInfo = { mid : 49, eid : 49, ispreview:0,code:{},next_mid : 52,isfinished: 1 }
var course_id=9
</script>


<link rel="stylesheet" href="css/f872107435c34f6b9c245921a5e33d6e.css" type="text/css" />
</head>
<body >


<div id="header" class="course-detail-header">
  <div class="cd-inner clearfix">
      <ul class="l">
        <li class="nv nv-goback"><a href="/learn/9" class="revert l"><i class="icon icon-left"></i></a></li>
        <li class="nv nv-menu">
          <a href="javascript:;" class="chaptername J-chaptername"  data-id="49" style="cursor:text;"><span>HTML+CSS基础课程</span><em>1-1 代码初体验，制作我的第一个网页...</em></a>
        </li>
        <li class="nv nv-share bdsharebuttonbox" >
          <!-- note:bdshare cannt user inner icon tag-->
            <span>分享</span>
            <a class="bds_weixin" data-cmd="weixin"></a>
            <a class="bds_qzone" data-cmd="qzone" href="#"></a>
            <a class="bds_tsina" data-cmd="tsina"></a>

          <div style="display:none" id="coursePic" ><img src="picture/529dc3380001379906000338-590-330.jpg"></div>
        </li>
        <li class="nv credit-tips js-share-statue">
          <span>分享即可 +</span><strong>1积分</strong>
        </li>
      </ul>

              <div id="login-area">
            <ul class="header-unlogin clearfix">
                <li class="shop-cart" id="shop-cart">
                    <a href="http://order.imooc.com/pay/cart" class="shop-cart-icon" target="_blank">
                        <span class="icon-shopping-cart js-endcart"></span>
                        <span class="shopping_icon js-cart-num" data-ordernum="0"  data-cartnum="0" style='display: none'>0</span>
                        <span>购物车</span>
                    </a>
                    <div class="my-cart" id="js-my-cart"></div>
                </li>
                <li class="header-signin">
                    <a href="#" id="js-signin-btn">登录</a>
                </li>
                <li class="header-signup">
                    <a href="#" id="js-signup-btn">注册</a>
                </li>
            </ul>
        </div>
        
  </div>
</div>

<div id="studyMain">

<!--修正多个头部的bug-->
<div class="wrap">
  <!--此处结构为练习题，视频，编程公用的侧栏-->
<div class="section-list">
    <div class="operator">
        <div class="op chapter"><em class="icon-menu"></em>章节</div>
        <div class="op notes"><em class="icon-note"></em>笔记</div>
        <div class="op question"><em class="icon-addques"></em>提问</div>
        <div class="op wiki"><em class="icon-wiki"></em>WIKI</div>
    </div>
    <div class="nano">
        <div class="nano-content">
            <h3>HTML+CSS基础课程</h3>
                        <ul>
                <li class="sec-title">
                    <span>第1章 Html介绍</span>
                </li>
                                                         <li data-id="49">
                                                <a href="/code/49"><em class="icon-code"></em>1-1 代码初体验，制作我的第一个网页...</a>
                                            </li>
                                                                             <li data-id="52">
                                                <a href="/code/52"><em class="icon-code"></em>1-2 Html和CSS的关系</a>
                                            </li>
                                                                             <li data-id="54">
                                                <a href="/code/54"><em class="icon-code"></em>1-3 认识html标签</a>
                                            </li>
                                                                             <li data-id="83">
                                                <a href="/code/83"><em class="icon-code"></em>1-4 标签的语法</a>
                                            </li>
                                                                             <li data-id="56">
                                                <a href="/code/56"><em class="icon-code"></em>1-5 认识html文件基本结构</a>
                                            </li>
                                                                             <li data-id="74">
                                                <a href="/code/74"><em class="icon-code"></em>1-6 认识head标签</a>
                                            </li>
                                                                             <li data-id="75">
                                                <a href="/code/75"><em class="icon-code"></em>1-7 了解HTML的代码注释</a>
                                            </li>
                                                </ul>
                        <ul>
                <li class="sec-title">
                    <span>第2章 认识标签(第一部分)</span>
                </li>
                                                         <li data-id="76">
                                                <a href="/code/76"><em class="icon-code"></em>2-1 语义化，让你的网页更好的被搜索...</a>
                                            </li>
                                                                             <li data-id="77">
                                                <a href="/code/77"><em class="icon-code"></em>2-2 &lt;body&gt;标签，网页上显示的内容放...</a>
                                            </li>
                                                                             <li data-id="78">
                                                <a href="/code/78"><em class="icon-code"></em>2-3 开始学习&lt;p&gt;标签，添加段落...</a>
                                            </li>
                                                                             <li data-id="84">
                                                <a href="/code/84"><em class="icon-code"></em>2-4 了解&lt;hx&gt;标签，为你的网页添加标...</a>
                                            </li>
                                                                             <li data-id="85">
                                                <a href="/code/85"><em class="icon-code"></em>2-5 加入强调语气，使用&lt;strong&gt;和&lt;e...</a>
                                            </li>
                                                                             <li data-id="87">
                                                <a href="/code/87"><em class="icon-code"></em>2-6 使用&lt;span&gt;标签为文字设置单独样...</a>
                                            </li>
                                                                             <li data-id="88">
                                                <a href="/code/88"><em class="icon-code"></em>2-7 &lt;q&gt;标签，短文本引用...</a>
                                            </li>
                                                                             <li data-id="89">
                                                <a href="/code/89"><em class="icon-code"></em>2-8 &lt;blockquote&gt;标签，长文本引用...</a>
                                            </li>
                                                                             <li data-id="97">
                                                <a href="/code/97"><em class="icon-code"></em>2-9 使用&lt;br&gt;标签分行显示文本...</a>
                                            </li>
                                                                             <li data-id="99">
                                                <a href="/code/99"><em class="icon-code"></em>2-10 为你的网页中添加一些空格...</a>
                                            </li>
                                                                             <li data-id="100">
                                                <a href="/code/100"><em class="icon-code"></em>2-11 认识&lt;hr&gt;标签，添加水平横线...</a>
                                            </li>
                                                                             <li data-id="101">
                                                <a href="/code/101"><em class="icon-code"></em>2-12 &lt;address&gt;标签，为网页加入地址...</a>
                                            </li>
                                                                             <li data-id="144">
                                                <a href="/code/144"><em class="icon-code"></em>2-13 想加入一行代码吗？使用&lt;code&gt;标...</a>
                                            </li>
                                                                             <li data-id="145">
                                                <a href="/code/145"><em class="icon-code"></em>2-14 使用&lt;pre&gt;标签为你的网页加入大...</a>
                                            </li>
                                                </ul>
                        <ul>
                <li class="sec-title">
                    <span>第3章 认识标签(第二部分)</span>
                </li>
                                                         <li data-id="288">
                                                <a href="/code/288"><em class="icon-code"></em>3-1 使用ul，添加新闻信息列表...</a>
                                            </li>
                                                                             <li data-id="289">
                                                <a href="/code/289"><em class="icon-code"></em>3-2 使用ol，添加图书销售排行榜...</a>
                                            </li>
                                                                             <li data-id="290">
                                                <a href="/code/290"><em class="icon-code"></em>3-3 认识div在排版中的作用</a>
                                            </li>
                                                                             <li data-id="291">
                                                <a href="/code/291"><em class="icon-code"></em>3-4 给div命名，使逻辑更加清晰...</a>
                                            </li>
                                                                             <li data-id="292">
                                                <a href="/code/292"><em class="icon-code"></em>3-5 table标签，认识网页上的表格...</a>
                                            </li>
                                                                             <li data-id="293">
                                                <a href="/code/293"><em class="icon-code"></em>3-6 用css样式，为表格加入边框...</a>
                                            </li>
                                                                             <li data-id="294">
                                                <a href="/code/294"><em class="icon-code"></em>3-7 caption标签，为表格添加标题和...</a>
                                            </li>
                                                </ul>
                        <ul>
                <li class="sec-title">
                    <span>第4章 认识标签(第三部分)</span>
                </li>
                                                         <li data-id="315">
                                                <a href="/code/315"><em class="icon-code"></em>4-1 使用&lt;a&gt;标签，链接到另一个页面...</a>
                                            </li>
                                                                             <li data-id="316">
                                                <a href="/code/316"><em class="icon-code"></em>4-2 在新建浏览器窗口中打开链接...</a>
                                            </li>
                                                                             <li data-id="317">
                                                <a href="/code/317"><em class="icon-code"></em>4-3 使用mailto在网页中链接Email地...</a>
                                            </li>
                                                                             <li data-id="318">
                                                <a href="/code/318"><em class="icon-code"></em>4-4 认识&lt;img&gt;标签，为网页插入图片...</a>
                                            </li>
                                                </ul>
                        <ul>
                <li class="sec-title">
                    <span>第5章 与浏览者交互，表单标签...</span>
                </li>
                                                         <li data-id="415">
                                                <a href="/code/415"><em class="icon-code"></em>5-1 使用表单标签，与用户交互...</a>
                                            </li>
                                                                             <li data-id="479">
                                                <a href="/code/479"><em class="icon-code"></em>5-2 文本输入框、密码输入框...</a>
                                            </li>
                                                                             <li data-id="489">
                                                <a href="/code/489"><em class="icon-code"></em>5-3 文本域，支持多行文本输入...</a>
                                            </li>
                                                                             <li data-id="497">
                                                <a href="/code/497"><em class="icon-code"></em>5-4 使用单选框、复选框，让用户选择...</a>
                                            </li>
                                                                             <li data-id="498">
                                                <a href="/code/498"><em class="icon-code"></em>5-5 使用下拉列表框，节省空间...</a>
                                            </li>
                                                                             <li data-id="500">
                                                <a href="/code/500"><em class="icon-code"></em>5-6 使用下拉列表框进行多选...</a>
                                            </li>
                                                                             <li data-id="501">
                                                <a href="/code/501"><em class="icon-code"></em>5-7 使用提交按钮，提交数据...</a>
                                            </li>
                                                                             <li data-id="520">
                                                <a href="/code/520"><em class="icon-code"></em>5-8 使用重置按钮，重置表单信息...</a>
                                            </li>
                                                                             <li data-id="3319">
                                                <a href="/code/3319"><em class="icon-code"></em>5-9 form表单中的label标签</a>
                                            </li>
                                                </ul>
                        <ul>
                <li class="sec-title">
                    <span>第6章 开始学习CSS，为网页添加样式...</span>
                </li>
                                                         <li data-id="609">
                                                <a href="/code/609"><em class="icon-code"></em>6-1 认识CSS样式</a>
                                            </li>
                                                                             <li data-id="610">
                                                <a href="/code/610"><em class="icon-code"></em>6-2 CSS样式的优势</a>
                                            </li>
                                                                             <li data-id="611">
                                                <a href="/code/611"><em class="icon-code"></em>6-3 CSS代码语法</a>
                                            </li>
                                                                             <li data-id="612">
                                                <a href="/code/612"><em class="icon-code"></em>6-4 CSS注释代码</a>
                                            </li>
                                                </ul>
                        <ul>
                <li class="sec-title">
                    <span>第7章 CSS样式基本知识</span>
                </li>
                                                         <li data-id="622">
                                                <a href="/code/622"><em class="icon-code"></em>7-1 内联式css样式，直接写在现有的H...</a>
                                            </li>
                                                                             <li data-id="623">
                                                <a href="/code/623"><em class="icon-code"></em>7-2 嵌入式css样式，写在当前的文件...</a>
                                            </li>
                                                                             <li data-id="624">
                                                <a href="/code/624"><em class="icon-code"></em>7-3 外部式css样式，写在单独的一个...</a>
                                            </li>
                                                                             <li data-id="628">
                                                <a href="/code/628"><em class="icon-code"></em>7-4 三种方法的优先级</a>
                                            </li>
                                                </ul>
                        <ul>
                <li class="sec-title">
                    <span>第8章 CSS选择器</span>
                </li>
                                                         <li data-id="2022">
                                                <a href="/code/2022"><em class="icon-code"></em>8-1 什么是选择器？</a>
                                            </li>
                                                                             <li data-id="1574">
                                                <a href="/code/1574"><em class="icon-code"></em>8-2 标签选择器</a>
                                            </li>
                                                                             <li data-id="1576">
                                                <a href="/code/1576"><em class="icon-code"></em>8-3 类选择器</a>
                                            </li>
                                                                             <li data-id="1584">
                                                <a href="/code/1584"><em class="icon-code"></em>8-4 ID选择器</a>
                                            </li>
                                                                             <li data-id="1585">
                                                <a href="/code/1585"><em class="icon-code"></em>8-5 类和ID选择器的区别</a>
                                            </li>
                                                                             <li data-id="2023">
                                                <a href="/code/2023"><em class="icon-code"></em>8-6 子选择器</a>
                                            </li>
                                                                             <li data-id="2024">
                                                <a href="/code/2024"><em class="icon-code"></em>8-7 包含(后代)选择器</a>
                                            </li>
                                                                             <li data-id="2025">
                                                <a href="/code/2025"><em class="icon-code"></em>8-8 通用选择器</a>
                                            </li>
                                                                             <li data-id="2036">
                                                <a href="/code/2036"><em class="icon-code"></em>8-9 伪类选择符</a>
                                            </li>
                                                                             <li data-id="2037">
                                                <a href="/code/2037"><em class="icon-code"></em>8-10 分组选择符</a>
                                            </li>
                                                </ul>
                        <ul>
                <li class="sec-title">
                    <span>第9章 CSS的继承、层叠和特殊性...</span>
                </li>
                                                         <li data-id="2038">
                                                <a href="/code/2038"><em class="icon-code"></em>9-1 继承</a>
                                            </li>
                                                                             <li data-id="2039">
                                                <a href="/code/2039"><em class="icon-code"></em>9-2 特殊性</a>
                                            </li>
                                                                             <li data-id="2040">
                                                <a href="/code/2040"><em class="icon-code"></em>9-3 层叠</a>
                                            </li>
                                                                             <li data-id="2042">
                                                <a href="/code/2042"><em class="icon-code"></em>9-4 重要性</a>
                                            </li>
                                                </ul>
                        <ul>
                <li class="sec-title">
                    <span>第10章 CSS格式化排版</span>
                </li>
                                                         <li data-id="2076">
                                                <a href="/code/2076"><em class="icon-code"></em>10-1 文字排版--字体</a>
                                            </li>
                                                                             <li data-id="2077">
                                                <a href="/code/2077"><em class="icon-code"></em>10-2 文字排版--字号、颜色</a>
                                            </li>
                                                                             <li data-id="2078">
                                                <a href="/code/2078"><em class="icon-code"></em>10-3 文字排版--粗体</a>
                                            </li>
                                                                             <li data-id="2079">
                                                <a href="/code/2079"><em class="icon-code"></em>10-4 文字排版--斜体</a>
                                            </li>
                                                                             <li data-id="2080">
                                                <a href="/code/2080"><em class="icon-code"></em>10-5 文字排版--下划线</a>
                                            </li>
                                                                             <li data-id="2081">
                                                <a href="/code/2081"><em class="icon-code"></em>10-6 文字排版--删除线</a>
                                            </li>
                                                                             <li data-id="2082">
                                                <a href="/code/2082"><em class="icon-code"></em>10-7 段落排版--缩进</a>
                                            </li>
                                                                             <li data-id="2083">
                                                <a href="/code/2083"><em class="icon-code"></em>10-8 段落排版--行间距（行高）...</a>
                                            </li>
                                                                             <li data-id="2084">
                                                <a href="/code/2084"><em class="icon-code"></em>10-9 段落排版--中文字间距、字母间距...</a>
                                            </li>
                                                                             <li data-id="2085">
                                                <a href="/code/2085"><em class="icon-code"></em>10-10 段落排版--对齐</a>
                                            </li>
                                                </ul>
                        <ul>
                <li class="sec-title">
                    <span>第11章 CSS盒模型</span>
                </li>
                                                         <li data-id="2047">
                                                <a href="/code/2047"><em class="icon-code"></em>11-1 元素分类</a>
                                            </li>
                                                                             <li data-id="2048">
                                                <a href="/code/2048"><em class="icon-code"></em>11-2 元素分类--块级元素</a>
                                            </li>
                                                                             <li data-id="2049">
                                                <a href="/code/2049"><em class="icon-code"></em>11-3 元素分类--内联元素</a>
                                            </li>
                                                                             <li data-id="2050">
                                                <a href="/code/2050"><em class="icon-code"></em>11-4 元素分类--内联块状元素...</a>
                                            </li>
                                                                            <li data-id="3225">
                                                <a href="/video/3225"><em class="icon-video"></em>11-5 什么是盒模型(02:14)</a>                        
                                            </li>
                                                                             <li data-id="2052">
                                                <a href="/code/2052"><em class="icon-code"></em>11-6 盒模型--边框（一）</a>
                                            </li>
                                                                             <li data-id="2053">
                                                <a href="/code/2053"><em class="icon-code"></em>11-7 盒模型--边框（二）</a>
                                            </li>
                                                                             <li data-id="2054">
                                                <a href="/code/2054"><em class="icon-code"></em>11-8 盒模型--宽度和高度</a>
                                            </li>
                                                                             <li data-id="2055">
                                                <a href="/code/2055"><em class="icon-code"></em>11-9 盒模型--填充</a>
                                            </li>
                                                                             <li data-id="2056">
                                                <a href="/code/2056"><em class="icon-code"></em>11-10 盒模型--边界</a>
                                            </li>
                                                </ul>
                        <ul>
                <li class="sec-title">
                    <span>第12章 CSS布局模型</span>
                </li>
                                                         <li data-id="2057">
                                                <a href="/code/2057"><em class="icon-code"></em>12-1 css布局模型</a>
                                            </li>
                                                                             <li data-id="2058">
                                                <a href="/code/2058"><em class="icon-code"></em>12-2 流动模型（一）</a>
                                            </li>
                                                                             <li data-id="2070">
                                                <a href="/code/2070"><em class="icon-code"></em>12-3 流动模型（二）</a>
                                            </li>
                                                                             <li data-id="2071">
                                                <a href="/code/2071"><em class="icon-code"></em>12-4 浮动模型</a>
                                            </li>
                                                                             <li data-id="2072">
                                                <a href="/code/2072"><em class="icon-code"></em>12-5 什么是层模型？</a>
                                            </li>
                                                                             <li data-id="2073">
                                                <a href="/code/2073"><em class="icon-code"></em>12-6 层模型--绝对定位</a>
                                            </li>
                                                                             <li data-id="2074">
                                                <a href="/code/2074"><em class="icon-code"></em>12-7 层模型--相对定位</a>
                                            </li>
                                                                             <li data-id="2075">
                                                <a href="/code/2075"><em class="icon-code"></em>12-8 层模型--固定定位</a>
                                            </li>
                                                                             <li data-id="3585">
                                                <a href="/code/3585"><em class="icon-code"></em>12-9 Relative与Absolute组合使用...</a>
                                            </li>
                                                </ul>
                        <ul>
                <li class="sec-title">
                    <span>第13章 CSS代码缩写，占用更少的带宽...</span>
                </li>
                                                         <li data-id="2088">
                                                <a href="/code/2088"><em class="icon-code"></em>13-1 盒模型代码简写</a>
                                            </li>
                                                                             <li data-id="2093">
                                                <a href="/code/2093"><em class="icon-code"></em>13-2 颜色值缩写</a>
                                            </li>
                                                                             <li data-id="2094">
                                                <a href="/code/2094"><em class="icon-code"></em>13-3 字体缩写</a>
                                            </li>
                                                </ul>
                        <ul>
                <li class="sec-title">
                    <span>第14章 单位和值</span>
                </li>
                                                         <li data-id="3884">
                                                <a href="/code/3884"><em class="icon-code"></em>14-1 颜色值</a>
                                            </li>
                                                                             <li data-id="5989">
                                                <a href="/code/5989"><em class="icon-code"></em>14-2 长度值</a>
                                            </li>
                                                </ul>
                        <ul>
                <li class="sec-title">
                    <span>第15章  css样式设置小技巧</span>
                </li>
                                                         <li data-id="4339">
                                                <a href="/code/4339"><em class="icon-code"></em>15-1 水平居中设置-行内元素...</a>
                                            </li>
                                                                             <li data-id="4336">
                                                <a href="/code/4336"><em class="icon-code"></em>15-2 水平居中设置-定宽块状元素...</a>
                                            </li>
                                                                             <li data-id="6363">
                                                <a href="/code/6363"><em class="icon-code"></em>15-3 水平居中总结-不定宽块状元素方...</a>
                                            </li>
                                                                             <li data-id="6364">
                                                <a href="/code/6364"><em class="icon-code"></em>15-4 水平居中总结-不定宽块状元素方...</a>
                                            </li>
                                                                             <li data-id="6365">
                                                <a href="/code/6365"><em class="icon-code"></em>15-5 水平居中总结-不定宽块状元素方...</a>
                                            </li>
                                                                             <li data-id="6368">
                                                <a href="/code/6368"><em class="icon-code"></em>15-6 垂直居中-父元素高度确定的单行...</a>
                                            </li>
                                                                             <li data-id="6370">
                                                <a href="/code/6370"><em class="icon-code"></em>15-7 垂直居中-父元素高度确定的多行...</a>
                                            </li>
                                                                             <li data-id="6424">
                                                <a href="/code/6424"><em class="icon-code"></em>15-8 垂直居中-父元素高度确定的多行...</a>
                                            </li>
                                                                             <li data-id="6107">
                                                <a href="/code/6107"><em class="icon-code"></em>15-9 隐性改变display类型</a>
                                            </li>
                                                </ul>
            
        </div>
    </div>
</div>  <div id="js-code-container" class="cmain-container">
    <div id="js-aticle-container" class="cwrap-autoheight aticle-container">
        <div class="code-panel" id="J_PanelCode">
            <h2 class="code-head"  id="J_CodeLang" data-lang="HTML" data-regular="1">代码初体验，制作我的第一个网页</h2>
            <div class="code-description" id="J_CodeDescr">
              <div class="code-desc co">
                <p>欢迎来到HTML+CSS课堂，加入高端大气上档次的web前端开发团队。<span style="line-height: 1.6em;">我们在正式学习之前，先来热热身，问候下世界，做个人生中的第一个html网页吧。</span></p>

              </div>
              <div class="code-tips">
                <h3 class="code-tips-title">任务</h3>
                <div class="co"><p>请在右边编辑器的第8行，在&lt;h1&gt;和&lt;/h1&gt;标签之间，输入<code class="marker"><strong>Hello World&nbsp;</strong></code>字符串。</p>
</div>
                <div class="code-qa" id="J_CodeQa">
                  <dl>
                    <dt><b>?</b>不会了怎么办</dt>
                    <dd class="hide">
                      <div class="co"><p>注意<code class="marker"><strong>Hello World</strong></code>文字一定要写到<code class="marker">&lt;h1&gt;&lt;/h1&gt;</code>两个标签之间。如：<code class="marker">&lt;h1&gt;Hello World&lt;/h1&gt;</code></p>
</div>
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
        </div>
    </div>

    <div id="js-editor-container" class="cwrap-autoheight editor-container">
      <div id="js-editor-drag-wrap" class="editor-drag-wrap">
        <div id="js-editor-drager" class="editor-drager"><span>||</span></div>
      </div>
      <div class="editor-box" id="J_EditorTabs" style="display:none">
          <div class="editor-tab js-editor-tab">
            <div class="editor-left icon-left editor-op"></div>
            <div class="editor-view">
              <ul class="clearfix" id="J_TabType">
                                  <li><a href="#editor-tabs-html">index.html</a></li>
                              </ul>
            </div>
            <div class="editor-right icon-right editor-op"></div>
          </div>
                    <div  class="tab-con editor-item"   id="editor-tabs-html"  data-filename="index.html" data-lang="html">&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
        &lt;title&gt;制作我的第一个网页&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;h1&gt;&lt;/h1&gt;
    &lt;/body&gt;
&lt;/html&gt;</div>
                </div>
      <div class="editor-btn" style="display:none">
        <div class="editor-btn-inner">
          <a href="javascript:;" class="code-btn-submit r" id="J_Commit" title="提交">提交</a>
      <div class='r aotorun'>
        <input type='checkbox' id='aotoruncheck' class='l' title='选中后修改代码将自动生效，不选中需要提交才可生效' />
        <label for='aotoruncheck' class='l' title='选中后修改代码将自动生效，不选中需要提交才可生效'>自动运行</label>
      </div>
          <a href="javascript:;" class="code-btn-reset " id="J_EditorReset" title="重置">重置代码</a>
        </div>
      </div>
      <div id="js-ques-box"></div>      <div class="editor-commit hide" id="J_EditorCommit"></div>
    </div>

    <div id="js-result-container" class="cwrap-autoheight result-container">
      <div id="js-result-drag-wrap" class="result-drag-wrap">
        <div id="js-result-drager" class="result-drager"><span>||</span></div>
      </div>
      <div class="result-wrap">
        <div id="viewPort-content">  </div>
      </div>
    </div>

    <div id="viewPort-header" class="result-triggers">
      <a href="javascript:;" id="js-toggle-width" class="result-toggle result-toggle-width"><i></i><span>全屏</span></a>
      <a href="javascript:;" id="js-toggle-vsb" class="result-toggle result-toggle-vsb" style="display:none;"><i></i><span>运行结果</span></a>
    </div>
  </div>
</div>
<div id='reset_mid' rel='49' hidden></div>
<div id='reset_step' rel='1' hidden></div>

<div class="maybe-wenda" id="maybe-wenda" style="display: none;">
    <i class="icon-chat"></i>
    <p class="text">你发的评论可能会是问题？<br/>是否将他发到问答中</p>
    <input class="btn ok" type="button" value="好的" id="wenda-ok">
    <input class="btn no" type="button" value="不用" id="wenda-no">
</div>
</div>

<div class="course-subcontainer clearfix">
  <div class="course-left">
      <ul class="course-menu course-code-menu clearfix js-course-menu" data-ower="all" data-sort="last">
    <li class="course-menu-item"><a class="active" href="javascript:void(0)" id="plMenu">评论</a></li>
    <li class="course-menu-item"><a href="javascript:void(0)" id="qaMenu">问答</a></li>
    <li class="course-menu-item"><a href="javascript:void(0)" id="noteMenu">笔记</a></li>
    <!--
    <li class="course-menu-item"><a href="javascript:void(0)" id="wikiMenu">WIKI</a></li>
    -->
        <li class="course-menu-item"><a href="javascript:void(0)" id="mateMenu">同学代码</a></li>
        </ul>
<div id="disArea" class="lists-container list-wrap">
    <div id="pl-content" class="list-tab-con">
        <div class="publish clearfix" id="discus-publish">
            <div class="publish-wrap publish-wrap-pl">
                <div class="pl-input-wrap clearfix">
                    <a href="" class="user-head l">
                        <img src="picture/avatar_default.png" >
                    </a>
                    <div id="js-pl-input-fake" class="pl-input-inner l">
                       <textarea  id="js-pl-textarea" class="js-placeholder" placeholder="扯淡、吐槽、表扬、鼓励……想说啥就说啥！" ></textarea>
                       <span  class="num-limit"><span id="js-pl-limit">0</span>/300</span>
                    </div>
                    <div class="pl-input-btm input-btm clearfix">
                        <div class="verify-code l"></div>
                        <input type="button"  id="js-pl-submit" class="r course-btn" value="发表评论" />
                    </div>
                </div>

            </div>
        </div>
        <div id="plLoadListData"></div>
    </div>
    <div id="qa-content" class="list-tab-con" style="display:none">
        <div id="qaLoadListData"></div>
    </div>
    <div id="note-content" class="list-tab-con" style="display:none">
        <div id="noteLoadListData">
        </div>
    </div>
    <div id="wiki-content" class="list-tab-con" style="display:none;">
        <div id="wikiLoadListData">
        </div>
    </div>
    <div id="mate-content" class="list-tab-con" style="display:none;">
        <div id="mateLoadListData">
        </div>
    </div>

</div>
  </div>
  <div class="course-right clearfix">
       
  <div class="js-recom-box">
	<!-- <div class="box mb40 all-attention-box">
		<h4>大家都关注</h4>
		<div class="js-all-attention all-attention">
			<a href="" target="_blank" data-id="1" class="">aa</a>
			<a href="" target="_blank" data-id="2" class="">biubiu~</a>
			<a href="" target="_blank" data-id="3" class="">一个前端开发的修养</a>
			<a href="" target="_blank" data-id="4" class="">呵呵</a>
			<a href="" target="_blank" data-id="5" class="">维萨只有前端有修养</a>
			<a href="" target="_blank" data-id="6" class="">别说笑了</a>
			<a href="" target="_blank" data-id="7" class="">修养是什么</a>
			<a href="" target="_blank" data-id="8" class="">能吃么</a>
		</div>
	</div> -->
	<!-- <div class="box mb40 recom-course-list-box">
		<h4>推荐课程</h4>                   
		<ul class="js-recom-course recom-course-list clearfix">
			<li class="clearfix">                    
				<a href="http://www.imooc.com/learn/327" class="clearfix" target="_blank">
					<div class="l course-img" style="background-image: url(images/cover015_s.jpg);">
						<div class="cart-color purple"></div>
					</div>
					<div class="l content-box">                            
						<p class="smalle-title">测试克隆慕课网</p>                            
						<p class="content-text" title="asfsafsafsafsadfsafsad">asfsafsafsafsadfsafsad</p>                            
						<div class="clearfix learn-detail">                                
							初级<span>·</span>138人在学                            
						</div>                        
					</div>                    
				</a>                
			</li>
			<li class="clearfix">                    
				<a href="http://www.imooc.com/learn/327" class="clearfix" target="_blank">
					<div class="l course-img" style="background-image: url(images/cover015_s.jpg);">
						<div class="cart-color purple"></div>
					</div>
					<div class="l content-box">                            
						<p class="smalle-title">测试克隆慕课网</p>                            
						<p class="content-text" title="asfsafsafsafsadfsafsad">asfsafsafsafsadfsafsad</p>                            
						<div class="clearfix learn-detail">                                
							初级<span>·</span>138人在学                            
						</div>                        
					</div>                    
				</a>                
			</li>
			<li class="clearfix">                    
				<a href="http://www.imooc.com/learn/327" class="clearfix" target="_blank">
					<div class="l course-img" style="background-image: url(images/cover015_s.jpg);">
						<div class="cart-color purple"></div>
					</div>
					<div class="l content-box">                            
						<p class="smalle-title">测试克隆慕课网</p>                            
						<p class="content-text" title="asfsafsafsafsadfsafsad">asfsafsafsafsadfsafsad</p>                            
						<div class="clearfix learn-detail">                                
							初级<span>·</span>138人在学                            
						</div>                        
					</div>                    
				</a>                
			</li>
		</ul>  
	</div> -->
</div>
  <div class="wendalist js-right-wenda">
    <div class="course-right-title">
        <h3>猿问推荐</h3>
        <a href="/wenda/?block_id=tuijian_yw" target="_blank" class="more">更多</a> 
    </div>

      <ul>
      </ul>
  </div>
  <div class="articlelist js-right-article">
    <div class="course-right-title">
        <h3>手记推荐</h3>
        <a href="/article/?block_id=tuijian_wz" target="_blank" class="more">更多</a> 
    </div>
    <div class="course-right-content">
      
    </div>
    <ul>

    </ul>
  </div>  </div>
</div>



<div id="footer" >
    <div class="waper">
        <div class="footerwaper clearfix">
            <div class="followus r">
                <a class="followus-weixin" href="javascript:;"  target="_blank" title="微信">
                    <div class="flw-weixin-box"></div>
                </a>
                <a class="followus-weibo" href="http://weibo.com/u/3306361973"  target="_blank" title="新浪微博"></a>
                <a class="followus-qzone" href="http://user.qzone.qq.com/1059809142/" target="_blank" title="QQ空间"></a>
            </div>
            <div class="footer_intro l">
                <div class="footer_link">
                    <ul>
                        <li><a href="http://www.imooc.com/" target="_blank">网站首页</a></li>
                        <li><a href="/about/cooperate" target="_blank" title="企业合作">企业合作</a></li>
                        <li><a href="/about/job" target="_blank">人才招聘</a></li>
                        <li> <a href="/about/contact" target="_blank">联系我们</a></li>
                        <!--<li><a href="/subject/html" target="_blank">专题页面</a></li>-->
                        <li><a href="/about/us" target="_blank">关于我们</a></li>
                        <li> <a href="/about/recruit" target="_blank">讲师招募</a></li>
                        <li> <a href="/user/feedback" target="_blank">意见反馈</a></li>
                        <li> <a href="/about/friendly" target="_blank">友情链接</a></li>
                    </ul>
                </div>
                <p>Copyright © 2017 imooc.com All Rights Reserved | 京ICP备 13046642号-2</p>
            </div>
        </div>
    </div>
</div>



<script type="text/javascript" charset="utf-8" src="js/ueditor.final.min.js"></script>

<script src="js/ssologin_1.js"></script>
<script type="text/javascript" src="js/sea_1.js"></script>
<script type="text/javascript" src="js/sea_config_1.js"></script>
<script type="text/javascript">seajs.use("/static/page/"+OP_CONFIG.module+"/"+OP_CONFIG.page);</script>



<div style="display: none">
  <script type="text/javascript">
  var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
  document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Ff0cfcccd7b1393990c78efdeebff3968' type='text/javascript'%3E%3C/script%3E"));
  </script>
</div>
<!--笔记弹出框-->

<script type="text/imooc-tpl" id="course-note-tpl">
   <div class="note-pop">
        <div id="js-note-input-fake" class="textarea-wrap">
            <textarea data-maxlength="1000" id="js-note-textarea" class="js-placeholder" name="" placeholder="请输入笔记内容..."></textarea>
            <p class="note-text-counter"><span id="js-note-limit">0</span>/1000</p>
        </div>
        <div class="publish-note-btns input-btm clearfix">
            <div class="verify-code clearfix"></div>
                                            <div title="截图" class="js-shot-code screen-btn" data-type="note">
                    <span>截图</span>
                </div>
                                        <input type="button" title="发表" value="保存" id="js-note-submit" class="moco-btn moco-btn-green r" />
            <!-- <label for="js-isshare"  class="label-checked r"><input type="checkbox" checked="checked" id="js-isshare" class="checked" /> 公开</label> -->
        </div>
</div>
</script>
<!--问答弹出框 通用-->
<script type="text/imooc-tpl" id="course-qa-tpl">

    <div class="qa-pop">

            <div class="question-area">
                <div class="qa-control qa-ipt-title">
                    <input type="text" id="js-qa-title" maxlength="255" class="js-placeholder autocomplete" placeholder="请输入问题标题" />
                </div>
                <a href="http://www.imooc.com/wenda/detail/292353" target="_blank" class="another-meth">如何更好<br />的提问？</a>
                <dl class="send-area-result">
                </dl>
            </div>

        <div class="qa-control-wrap clearfix">
            <div class="qa-control">
                <div class="rich-text-editor">
                    <textarea id="discuss-editor" >请输入讨论内容...</textarea>
                </div>
            </div>
        </div>
        <div id="js-discuss-btm" class="discuss-bottom input-btm clearfix pop-footer">
            <div class="verify-code clearfix"></div>
                                            <div title="截图" class="js-shot-code screen-btn" data-type="qa">
                    <span>截图</span>
                </div>
                                        <input id="js-discuss-submit" class="r moco-btn moco-btn-green" type="button" value="发布" />
        </div>
        <div id="use-credit-tip" class="use-credit-tip">
            <span class="credit-info">本次提问将花费2个积分</span>
            <a class="credit-rule" href="/about/faq?t=3" target="_blank">为什么扣积分？</a>
        </div>
    </div>

</script>
<!--积分弹出框-->
<div class="integral-pop" id="no-credit">
    <div class="pop-con">
        <span class="icon-point"></span>
                    <p>本次提问将花费2个积分</p>
                <p>你的积分不足，无法发表</p>
        <a class="integral-rule" href="/about/faq?t=3" target="_blank">为什么扣积分？</a>
        <div class="ft clearfix">
            <a href="javascript:void(0)" class="btn btn-green l cancel-cf">确认</a>
            <a href="javascript:void(0)" class="btn btn-grey r cancel-cf">取消</a>
        </div>
    </div>
</div>
<div class="integral-pop" id="enough-credit">
    <div class="pop-con">
        <span class="icon-point"></span>
                    <p>本次提问将花费2个积分</p>
                <p>继续发表请点击 "确定"</p>
        <a class="integral-rule" href="/about/faq?t=3" target="_blank">为什么扣积分？</a>
        <div class="ft clearfix">
            <a id="interal-use" href="javascript:void(0)" class="btn btn-green l">确认</a>
            <a id="interal-cancel" href="javascript:void(0)" class="btn btn-grey r">取消</a>
        </div>
    </div>
</div>

<!--WIKI弹出框 通用-->
<script type="text/imooc-tpl" id="course-wiki-tpl">
    <div class="wiki-pop">

        <div class='search_box clearfix'>
            <input class='search_ipt' type='text' placeholder='输入你想要找的WiKi词条名称' />
            <input type='button' value='搜索' class='search_btn' />
            <a class='createwiki' href='/wiki/create' target="_blank">创建wiki</a>
        </div>
        
        <div id='js-search-area-result' class='search-area-result'>
        </div>
    </div>

</script>

<div id="video_mark" class="video_mark" style="display:none;"></div>
<!--<div class="fixed-video js-fixed-video">-->
    <!--<h3>点击按住该条进行拖动</h3>-->
    <!--<div class="fixed-video-con"></div>-->
<!--</div>-->
<!--
//此处结构在js里插入
<div class="animate-mp" style="left:50%;top:50%">-->
    <!--<p class="mp"><i>+</i><span class="num">8</span>MP</p>-->
    <!--<p class="desc">haha</p>-->
<!--</div>-->
</body>
</html>
